<template>
  <div class="ui-demo">
    <div class="demo-item">
      <div
        class="demo-code"
        data-script="#1"
      >
        <zyb-cell-swipe>
          <zyb-cell-swipe-item
            :disabled="info.disabled"
            :right="info.isDefault ? [{
              content: '删除',
              style: { background: '#F43429', color: '#fff' },
              handler: () => deleteSection(info.id),
            }] : [{
              content: '设为默认',
              style: { background: '#ccc', color: '#fff' },
              handler: () => setDefaultAddr(info.id),
            }, {
              content: '删除',
              style: { background: '#F43429', color: '#fff' },
              handler: () => deleteSection(info.id),
            }]"
            v-for="(info, index) in addressList"
            :key="index"
            :id="info.id"
          >
            <div class="info">
              {{ info.content }}
            </div>
          </zyb-cell-swipe-item>
        </zyb-cell-swipe>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      addressList: [{
        id: 0,
        isDefault: true,
        content: '测试一',
        disabled: false,
      }, {
        id: 1,
        isDefault: false,
        content: '测试二',
        disabled: false,
      }],
    };
  },
  methods: {
    deleteSection(id) {
      console.log(`删除id为：${id}`);
    },
    setDefaultAddr(id) {
      console.log(`设默认地址id为：${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.cell-swipe-item {
  margin-bottom: 5px;
  background: #f1f1f1;
}
.info {
  padding: 8px 5px;
  width: 100%;
  user-select: none;
  font-size: 14px;
}
</style>
